<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>我的首页</title>
  <script src="/javascript/javascript.js"></script>
  <link rel="stylesheet" href="/stylesheets/reg.css">
</head>
<body>
<div class="navs">
  <nav>
    <span class="titl"><a class="tit" href="/" title="首页">主页</a></span>
    <% if (user) { %>
    <span><a class="head" href="/post">发布</a></span>
    <span><a class="head" href="/archive">存档</a></span>
    <span><a class="head" href="/tags">标签</a></span>
    <span><a class="head" href="/upload">上传</a></span>
    <span><a class="out" href="/logout">退出</a></span>
    <%  } else { %>
    <span><a class="log" href="/login" title="登录">登录</a></span>
    <span><a class="re" href="/reg" title="注册">注册</a></span>
    <% } %>
    <span>
    <form action="/search" method="get" class="search">
      <input type="text" placeholder="SEARCH" name="keyword">
    </form>
  </span>
  </nav>
  <h1>新用户注册</h1>
  <article>
    <% if (success) { %>
    <div><%= success %></div>
    <% } %>
    <% if (error) { %>
    <div><%= error %></div>
    <% } %>

<section>
  <form action="/reg" method="post" id="newreg">
    <div class="one">
      用户名称&nbsp;:&nbsp;<input id="ones" class="content" type="text" placeholder="4位以上数字、字母" onkeyup="myFuncOne()" name="name"
                  required pattern="\w{4,25}">
      <span class="jianyan"></span>
    </div>
    <div class="two">
      输入密码&nbsp;:&nbsp;<input id="twos" class="content" placeholder="4位以上数字、字母"  type="password" name="password" onkeyup="myFuncTwo()"
                  required pattern="\w{4,25}">
      <span class="jianyan"></span>
    </div>
    <div class="two">
      确认密码&nbsp;:&nbsp;<input id="threes" class="content"  type="password" name="password-repeat" onkeyup="myFuncThree()"
                  required pattern="\w{4,25}">
      <span class="jianyan"></span>
    </div>
    <div class="four">
      输入邮箱&nbsp;:&nbsp;<input id="fours" class="content" placeholder="**********@qq.com" type="text" name="email" onkeyup="myFuncFour()"
                  require pattern="(\d+)@(\w+)(\.)(\w+)">
      <span class="jianyan"></span>
    </div>
    <button>完成注册</button>
  </form>
</section>
<script type="text/javascript">
  function myFuncOne() {
    var pattenOne = new RegExp(/\w{4,25}/);
    var userone = document.getElementById('ones').value;
    var span = document.querySelector('.one span');
    if(pattenOne.test(userone)) {
      span.innerHTML = "*注册后不能修改";
      span.style.color = 'wheat';
    } else {
      span.innerHTML = "!!!格式错误";
      span.style.color = 'chocolate';
    }
  }
  function myFuncTwo() {
    var pattenTwo = new RegExp(/\w{4,25}/);
    var usertwo = document.getElementById('twos').value;
    var span = document.querySelector('.two span');
    if(pattenTwo.test(usertwo)) {
      span.innerHTML = "*不能少于4位";
      span.style.color = 'wheat';
    } else {
      span.innerHTML = "!!!格式错误";
      span.style.color = 'chocolate';
    }
  }
  function myFuncThree() {
    var pattenThree = new RegExp(/\w{4,25}/);
    var userthree = document.getElementById('threes').value;
    var span = document.querySelector('.three span');
    if(pattenThree.test(userthree)) {
      span.innerHTML = "*不能少于4位";
      span.style.color = 'wheat';
    } else {
      span.innerHTML = "!!!格式错误";
      span.style.color = 'chocolate';
    }
  }
  function myFuncFour() {
    var pattenFour = new RegExp(/(\d+)@(\w+)(\.)(\w+)/);
    var userfour = document.getElementById('fours').value;
    var span = document.querySelector('.four span');
    if(pattenFour.test(userfour)) {
      span.innerHTML = "*正确的邮箱格式";
      span.style.color = 'wheat';
    } else {
      span.innerHTML = "!!!邮箱格式错误";
      span.style.color = 'chocolate';
    }
  }
</script>
</article>
</div>
</body>
</html>

